<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.idiotCover {
	background-color: #000;
	position: fixed;
	z-index: 9999999;
	opacity: 0.3;
	filter: Alpha(opacity = 70);
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

.idiotProgressBox {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	margin: auto;
	min-width: 200px;
	width: 250px;
	height: 100px;
	padding: 30px;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 16px;
}

.idiotProgress {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.idiotProgress idiotProgress-title {
	display: flex;
	border: 2px solid #fff;
	justify-content: center;
	align-items: center;
}

.idiotProgress .idiotProgress-title p {
	color: #eee;
	font-size: 17px;
	font-weight: 500;
	margin-left: 10px;
}

.idiotProgress img {
	margin: 10px;
	width: 35px;
	height: 35px;
}
</style>
</head>
<body>
	<form id="formEdit" action="sysFile/save" class="form-horizontal"
		role="form">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">编辑文件</h4>
				</div>
				<div class="modal-body">

					<!-- 以下为要修改的的内容 -->
					<input type="hidden" name="id" data-th-value="${model.id}">

					<div th:if="${edit}" class="form-group" id="myfile1">
						<label for="txt_file" class="col-sm-2 control-label">文件</label>
						<div class="col-sm-9">
							<input type="file" name="file" id="file1" data-show-preview="true">
						</div>
					</div>

					<div class="form-group" id="myfile" th:if="${!edit}">
						<label for="txt_file" class="col-sm-2 control-label">文件</label>
						<div class="col-sm-9">
							<input type="file" name="file2" id="file" required multiple data-show-preview="false"
								data-bv-notempty-message="文件不能为空">
						</div>
					</div>

					<div class="form-group">
						<label for="txt_fileName" class="col-sm-2 control-label">文件标题</label>
						<div class="col-sm-9">
							<input type="text" name="fileTitle"
								data-th-value=${model.fileTitle} class="form-control"
								id="text_fileTitle" placeholder="文件标题">
						</div>
					</div>
					<div class="form-group">
						<label for="txt_type" class="col-sm-2 control-label">权限设置</label>
						<div class="col-sm-9">
							<select class="form-control selectpicker" title="权限"
								name="fileNature">
								<option data-th-each="t:${fileNature}"
									data-th-selected="${#strings.contains(model.fileNature==null?'1':model.fileNature.name,t.name)}"
									data-th-text="${t.name}" data-th-value="${t.id}"></option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="txt_fileType" class="col-sm-2 control-label">文件类型</label>
						<div class="col-sm-9">
							<select class="form-control selectpicker" title="类型"
								name="fileType">
								<option data-th-each="t:${fileType}"
									data-th-selected="${#strings.contains(model.fileType==null?'1':model.fileType.name,t.name)}"
									data-th-text="${t.name}" data-th-value="${t.id}"></option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="txt_fileRemark" class="col-sm-2 control-label">文件备注</label>
						<div class="col-sm-9">
							<input type="text" name="fileRemark"
								data-th-value=${model.fileRemark} class="form-control"
								id="txt_fileRemark" placeholder="文件备注">
						</div>
					</div>

					<!-- 以上为要修改的内容 -->

				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary">
						<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
					</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">
						<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
					</button>
				</div>
			</div>
		</div>
	</form>
	<script type="text/javascript">
	 $(function () {
		   $('.selectpicker').selectpicker();
	        initFileInput("file");
	       	initFileInput("file1");
	    });
	 
	    function initFileInput(ctrlName) {
	        var control = $('#' + ctrlName);
	        control.fileinput({
	            language: 'zh', //设置语言
	            uploadUrl: "", //上传的地址
	            allowedFileExtensions: ['jpg', 'gif', 'png','txt','doc','docx','xls','xlsx','ppt','mp3','wav','ogg','mp4','avi','mov','rmvb','rm','flv','3GP'],//接收的文件后缀
	            //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
	            maxFileCount:0, //最大上传文件数，0为不限最大文件数
	            uploadAsync: true, //默认异步上传
	            showUpload: false, //是否显示上传按钮
	            showClose:false,	//隐藏右上角叉
	            showRemove : true, //显示移除按钮
	            //showPreview : false, //是否显示预览
	            showCaption: true,//是否显示标题
	            browseClass: "btn btn-primary", //按钮样式
	            enctype: 'multipart/form-data',
	            validateInitialCount:true,
	            textEncoding:'UTF-8',
	            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
	        }).on("fileuploaded", function (event, data, previewId, index){
	        });
	    }
</script>
	<script type="text/javascript" th:inline="javascript">
 	var options= {
			message: '验证不通过',
			feedbackIcons: {
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: { 
            	 
           	 fileTitle: {
    				validators: {
    					notEmpty: {
    						message: '文件标题不能为空'
    					}
    				}
    			} 
             	
             }
         };
        $('#formEdit').bootstrapValidator(options).on('success.form.bv', function(e) {
        	showLoading(null,true);
        	e.preventDefault();							   	//很重要没有它则会提交默认表单，不会做下面的ajax表单提交
            var fd = new FormData($("#formEdit")[0]); 
            var url=$('#formEdit').attr('action');
        	$.ajax({ 
              url: url,  
              type: "POST",  
              data: fd,  
              processData: false,  // 不处理数据  
              contentType: false,   // 不设置内容类型
              success:function(result){
            	  if(result.success){
            		  closeLoading();
	            	  $('#myModal').modal("hide");
            	  }else{
            		  closeLoading();
            		  bootbox.alert(result.msg);
            	  }
              },
              error:function(result){
            	  closeLoading();
            	  bootbox.alert("保存请求发送失败，请检查网络是否连通");
              }
            });  
    	});
 		$(function(){
 			//修改时隐藏文件上传框
 			var edit =[[${edit}]];
 			/* if(edit!=null){
 				$("#myfile").attr("style","display:none;");
 			}else{
 				$("#myfile1").attr("style","display:none;");
 			} */
 			
 			$('#txt_dept').bootstrapCombotree({
 				url:'dept/combotree'
 			});
		});
 			
 		//打开关闭加载动画
 		function showLoading(title, modal) {
            if (title == null || title == '' || title == undefined) {
                title = '上传中。。。';
            }
            if (modal == null || modal == '' || modal == undefined) {
                modal = false;
            }
            var body = document.getElementsByTagName("body")[0];
            //console.log(body);
            var html = "<div class='idiotProgressBox' id='idiotProgress'>" +
                "<div class='idiotProgress'><img src='static/img/loading.gif'/>" +
                "<div class='idiotProgress-title'><p>" + title + "</p></div>" +
                "</div>" +
                "</div>";
            var modalhtml;
            if (modal) {
                modalhtml = "<div id='idiotCover' class='idiotCover'></div>";
            } else {
                modalhtml = "<div id='idiotCover' class='idiotCover' onclick='closeLoading()'></div>";
            }
            body.insertAdjacentHTML("afterbegin", modalhtml);
            body.insertAdjacentHTML("afterbegin", html);
        }

        function closeLoading() {
            var progress = document.getElementById("idiotProgress");
            var cover = document.getElementById("idiotCover");
            if (progress != null && progress != undefined) {
                progress.parentNode.removeChild(progress);
            }
            if (cover != null && cover != undefined) {
                cover.parentNode.removeChild(cover);
            }
        }
</script>
</body>
</html>